<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="test">
    <Msg></Msg>
    <my-counter/>
  </div>

  <script>
    /* 
    定义组件
      1. Vue.extend()
      2. 直接写一个配置对象
    注册组件:
      局部: 组件/vm的components配置 => 只能在对应的模板中进行使用
      全局: Vue.component() => 任意模板中都能使用
    */
   const Counter = {
    data () {
      return {
        count: 1
      }
    },
    template: `<p>count: {{count}}</p>`
   }

    // 定义组件
    const Msg = Vue.extend({
      // data: {msg: 'abc'},  // 组件的data配置不能对象, 只能返回对象的函数
      data () {
        return {
          msg: 'abc'
        }
      },
      template: `
        <div>
          <p>{{msg}}</p>
          <button @click='update'>更新</button>
          <hr>
          <my-counter />
        </div>
      `,
      methods: {
        update () {
          this.msg += '--'
        }
      },

      // components: {
      //   Counter
      // }
    })

    // 全局注册组件
   Vue.component('my-counter', Counter)


    new Vue({
      el: '#test',
      data: {

      },
      // 注册组件: 局部注册
      components: {
        Msg
      }
    })

    // Vue.component('my-counter', Counter)  不能在搭载之后进行注册
   
  </script>
</body>
</html>